import React, { useEffect, useState } from 'react';
import './Navigation.css';

interface NavigationProps {
  activePage: string;
  onNavigate: (page: string) => void;
}

export const Navigation: React.FC<NavigationProps> = ({ activePage, onNavigate }) => {
  const [darkMode, setDarkMode] = useState<boolean>(false);

  // 检查并应用存储的主题设置
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
      setDarkMode(true);
      document.body.classList.add('dark-theme');
    }
  }, []);

  // 切换主题
  const toggleTheme = () => {
    setDarkMode(!darkMode);
    if (darkMode) {
      document.body.classList.remove('dark-theme');
      localStorage.setItem('theme', 'light');
    } else {
      document.body.classList.add('dark-theme');
      localStorage.setItem('theme', 'dark');
    }
  };

  // 药材详情页不显示完整导航
  if (activePage === 'herb-detail') {
    return (
      <nav className="main-nav simplified">
        <div className="nav-logo">
          <span>本草纲目</span>
        </div>
        
        <div className="nav-back" onClick={() => onNavigate('home')}>
          <span className="nav-icon">🔙</span>
          <span className="nav-text">返回药材浏览</span>
        </div>
        
        <div className="theme-toggle" onClick={toggleTheme}>
          <span className="toggle-icon">
            {darkMode ? '☀️' : '🌙'}
          </span>
        </div>
      </nav>
    );
  }

  return (
    <nav className="main-nav">
      <div className="nav-logo">
        <span>本草纲目</span>
      </div>
      
      <ul className="nav-links">
        <li 
          className={`nav-item ${activePage === 'dashboard' ? 'active' : ''}`} 
          onClick={() => onNavigate('dashboard')}
        >
          <span className="nav-icon">📊</span>
          <span className="nav-text">主控制台</span>
        </li>

        <li 
          className={`nav-item ${activePage === 'home' ? 'active' : ''}`} 
          onClick={() => onNavigate('home')}
        >
          <span className="nav-icon">🌿</span>
          <span className="nav-text">药材浏览</span>
        </li>
        
        <li 
          className={`nav-item ${activePage === 'stats' ? 'active' : ''}`} 
          onClick={() => onNavigate('stats')}
        >
          <span className="nav-icon">📈</span>
          <span className="nav-text">统计分析</span>
        </li>
        
        <li 
          className={`nav-item ${activePage === 'map' ? 'active' : ''}`} 
          onClick={() => onNavigate('map')}
        >
          <span className="nav-icon">🗺️</span>
          <span className="nav-text">地理历史</span>
        </li>
        
        <li 
          className={`nav-item ${activePage === 'connections' ? 'active' : ''}`} 
          onClick={() => onNavigate('connections')}
        >
          <span className="nav-icon">🔄</span>
          <span className="nav-text">关联网络</span>
        </li>
      </ul>
      
      <div className="theme-toggle" onClick={toggleTheme}>
        <span className="toggle-icon">
          {darkMode ? '☀️' : '🌙'}
        </span>
      </div>
    </nav>
  );
}; 